import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useImperativeHandle, useRef } from "./hook/index";

// 父组件 想拿到子组建的dom元素
// 类组件中可以通过ref拿到组件的实例，但是函数式组件是没有实力的
function Counter(props, inputRef) {
    console.log("props", props);
    const childRef = useRef();
    // 可以将组件到处的变量数据 都放在里面
    useImperativeHandle(inputRef, () => ({
        focus() {
            console.log("focus");
        },
        blur() {
            console.log("blur", childRef.current);
        },
    }));
    return <input type="text" ref={childRef}></input>;
}

const ForWardCounter = React.forwardRef(Counter);

function App() {
    const inputRef = useRef();

    const getFoucus = () => {
        // 父组件拿到子组件的 dom
        console.log("获取焦点", inputRef.current);
        inputRef.current.focus(); // 获取子组件 focus 注意这里并非是 dom 身上的聚焦事件
        inputRef.current.blur();
        //! inputRef 这里可以获取子组件传递出来的一些事件或方法
    };

    return (
        <div>
            <ForWardCounter ref={inputRef}></ForWardCounter>
            <button onClick={getFoucus}>获取焦点</button>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
